Pencocokan Tipe Transisi Tampilan CSS: Menguasai Asosiasi Tipe Animasi

Transisi Tampilan CSS (CSS View Transitions) menawarkan cara yang kuat dan elegan untuk menciptakan transisi yang mulus dan menarik secara visual antara berbagai status dalam aplikasi web Anda. Aspek penting dalam menggunakan Transisi Tampilan secara efektif terletak pada pemahaman asosiasi tipe animasi, yang memungkinkan Anda mengontrol animasi spesifik yang diterapkan pada elemen yang berbeda selama transisi. Artikel ini mendalami seluk-beluk asosiasi tipe animasi, memberikan contoh praktis dan panduan tentang cara memanfaatkannya untuk pengalaman pengguna yang menakjubkan.

Memahami Dasar-Dasar Transisi Tampilan

Sebelum mendalami asosiasi tipe animasi, mari kita ulas kembali secara singkat fundamental dari Transisi Tampilan CSS. Fitur ini menyediakan mekanisme standar untuk menganimasikan perubahan antara status DOM. Ketika perubahan status terjadi (misalnya, menavigasi antar halaman dalam aplikasi satu halaman atau memperbarui konten dalam sebuah komponen), Transisi Tampilan menangkap status elemen sebelum dan sesudah perubahan. Status yang ditangkap ini kemudian digunakan untuk membuat transisi animasi.

Mekanisme intinya diinisiasi oleh fungsi document.startViewTransition(), yang mengambil sebuah fungsi callback yang memperbarui DOM ke status baru.

Contoh:

 document.startViewTransition(() => {
  // Perbarui DOM ke status baru
  updateTheDOM();
 });

Kekuatan view-transition-name

Properti CSS view-transition-name adalah fondasi untuk mengidentifikasi elemen yang harus berpartisipasi dalam transisi tampilan. Elemen dengan view-transition-name yang sama dianggap terhubung secara logis di berbagai status. Peramban kemudian secara otomatis menghasilkan pseudo-elemen yang mewakili status 'lama' dan 'baru' dari elemen-elemen ini, memungkinkan Anda untuk menerapkan animasi pada mereka.

Contoh:

.card {
  view-transition-name: card-element;
}

Dalam contoh ini, semua elemen dengan kelas 'card' akan ditangkap statusnya sebelum dan sesudah pembaruan DOM dan akan berpartisipasi dalam transisi jika view-transition-name mereka tetap konsisten di seluruh pembaruan.

Asosiasi Tipe Animasi: Memperkenalkan view-transition-class

Asosiasi tipe animasi, yang dicapai terutama melalui properti CSS view-transition-class, adalah kunci untuk menyesuaikan animasi yang diterapkan selama Transisi Tampilan. Ini memungkinkan Anda untuk menentukan animasi yang berbeda untuk elemen yang berbeda berdasarkan peran atau tipe mereka dalam transisi. Anggap saja seperti menugaskan "peran" animasi ke berbagai bagian transisi.

Properti view-transition-class ditetapkan ke sebuah elemen sama seperti properti CSS lainnya. Nilainya adalah sebuah string, dan string itu kemudian digunakan untuk memilih pseudo-elemen ::view-transition-* yang sesuai di CSS Anda.

Kekuatan sebenarnya muncul ketika Anda menggabungkan view-transition-class dengan pseudo-elemen ::view-transition-group, ::view-transition-image-pair, ::view-transition-new, dan ::view-transition-old.

Memahami Pseudo-Elemen

• ::view-transition-group(view-transition-name): Mewakili sebuah grup yang berisi status lama dan baru dari sebuah elemen dengan view-transition-name yang ditentukan. Ini adalah wadah tingkat atas untuk transisi.
• ::view-transition-image-pair(view-transition-name): Membungkus gambar lama dan baru ketika transisi tampilan melibatkan gambar. Ini memungkinkan animasi yang sinkron antara gambar lama dan baru.
• ::view-transition-new(view-transition-name): Mewakili status *baru* dari elemen.
• ::view-transition-old(view-transition-name): Mewakili status *lama* dari elemen.

Contoh Praktis Asosiasi Tipe Animasi

Mari kita jelajahi beberapa contoh praktis untuk mengilustrasikan cara kerja asosiasi tipe animasi dalam praktik.

Contoh 1: Memunculkan Konten Baru dengan Efek Fade In

Misalkan Anda memiliki daftar item, dan Anda ingin item baru muncul dengan efek fade in saat ditambahkan. Anda dapat menggunakan view-transition-class dan ::view-transition-new untuk mencapainya.

HTML:

<ul id="item-list">
  <li class="item" style="view-transition-name: item-1;">Item 1</li>
  <li class="item" style="view-transition-name: item-2;">Item 2</li>
</ul>

JavaScript (untuk menambahkan item baru):

function addNewItem() {
  document.startViewTransition(() => {
    const newItem = document.createElement('li');
    newItem.classList.add('item');
    newItem.style.viewTransitionName = `item-${Date.now()}`;
    newItem.style.viewTransitionClass = 'new-item'; // Tetapkan kelas
    newItem.textContent = 'New Item';
    document.getElementById('item-list').appendChild(newItem);
  });
}

CSS:

::view-transition-new(item-*) {
  animation: fade-in 0.5s ease-in-out;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

Dalam contoh ini, kita menetapkan kelas 'new-item' ke item daftar baru sebelum transisi tampilan. CSS kemudian menargetkan pseudo-elemen ::view-transition-new (yang cocok dengan nama `item-*` dari gaya `view-transition-name`) dan menerapkan animasi fade-in. Perhatikan bagaimana kelas 'new-item' itu sendiri *tidak* digunakan dalam selektor CSS. *Nilai* dari properti view-transition-class hanya penting ketika mempertimbangkan elemen *sebenarnya* yang Anda atur.

Contoh 2: Menggeser Keluar Konten Lama

Membangun dari contoh sebelumnya, mari kita buat item lama bergeser keluar sementara item baru muncul dengan efek fade in.

JavaScript (sama seperti sebelumnya):

function addNewItem() {
  document.startViewTransition(() => {
    const newItem = document.createElement('li');
    newItem.classList.add('item');
    newItem.style.viewTransitionName = `item-${Date.now()}`;
    newItem.style.viewTransitionClass = 'new-item'; // Tetapkan kelas
    newItem.textContent = 'New Item';
    document.getElementById('item-list').appendChild(newItem);
  });
}

CSS:

::view-transition-new(item-*) {
  animation: fade-in 0.5s ease-in-out;
}

::view-transition-old(item-*) {
  animation: slide-out 0.5s ease-in-out;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-out {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(-100%); opacity: 0; }
}

Di sini, kita telah menambahkan animasi ke pseudo-elemen ::view-transition-old, menyebabkan item lama bergeser ke kiri sambil memudar. Perhatikan lagi bahwa view-transition-class hanya relevan pada elemen *baru* yang kita tambahkan; itu tidak mempengaruhi elemen *lama* yang sudah ada di halaman dan berpartisipasi dalam transisi.

Contoh 3: Transisi Navigasi yang Lebih Kompleks

Bayangkan sebuah aplikasi satu halaman (SPA) dengan menu navigasi. Ketika pengguna mengklik item menu, area konten harus bertransisi dengan mulus ke halaman baru. Kita bisa menggunakan view-transition-class untuk membedakan area header dan konten, menerapkan animasi yang berbeda untuk masing-masing.

HTML (Disederhanakan):

<header style="view-transition-name: header; view-transition-class: header-transition;">
  <h1>My Website</h1>
</header>
<main style="view-transition-name: content; view-transition-class: content-transition;">
  <p>Initial Content</p>
</main>

JavaScript (Disederhanakan):

function navigateTo(pageContent) {
  document.startViewTransition(() => {
    document.querySelector('main').innerHTML = pageContent;
  });
}

CSS:

::view-transition-old(header) {
  animation: fade-out 0.3s ease-in-out;
}

::view-transition-new(header) {
  animation: fade-in 0.3s ease-in-out;
}

::view-transition-old(content) {
  animation: slide-out-left 0.5s ease-in-out;
}

::view-transition-new(content) {
  animation: slide-in-right 0.5s ease-in-out;
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slide-out-left {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

@keyframes slide-in-right {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

Dalam skenario ini, header muncul dan menghilang dengan efek fade, sementara konten bergeser masuk dari kanan dan keluar ke kiri, menciptakan pengalaman navigasi yang dinamis dan menarik. Kita mencapai ini dengan menerapkan kelas header-transition dan content-transition, yang memungkinkan kita menargetkan area header dan konten secara terpisah dengan animasi yang berbeda.

Praktik Terbaik Menggunakan Asosiasi Tipe Animasi

Untuk memanfaatkan asosiasi tipe animasi secara efektif, pertimbangkan praktik terbaik berikut:

• Rencanakan transisi Anda: Sebelum mengimplementasikan transisi apa pun, rencanakan dengan cermat animasi yang diinginkan dan bagaimana mereka akan meningkatkan pengalaman pengguna. Pertimbangkan alur informasi dan bagaimana cara memandu pengguna secara visual melalui perubahan.
• Gunakan nama kelas yang deskriptif: Pilih nama kelas yang dengan jelas menunjukkan peran elemen dalam transisi (misalnya, 'new-item', 'old-item', 'header-transition'). Ini meningkatkan keterbacaan dan pemeliharaan kode.
• Jaga agar animasi tetap ringkas: Hindari animasi yang terlalu kompleks atau panjang yang dapat mengalihkan perhatian pengguna atau memperlambat aplikasi. Bertujuan untuk transisi yang mulus dan halus yang meningkatkan, bukan menghalangi, pengalaman pengguna. Mata manusia sensitif terhadap penundaan lebih dari beberapa ratus milidetik, jadi jaga agar transisi tetap cepat.
• Uji secara menyeluruh: Uji transisi Anda di berbagai perangkat dan peramban untuk memastikan mereka dirender dengan benar dan berjalan dengan lancar. Perhatikan kinerja, terutama pada perangkat seluler.
• Pertimbangkan aksesibilitas: Pikirkan pengguna dengan sensitivitas gerakan. Sediakan opsi untuk menonaktifkan animasi atau mengurangi intensitasnya. Media query prefers-reduced-motion dapat digunakan untuk mendeteksi jika pengguna telah meminta pengurangan gerakan di pengaturan sistem operasi mereka.
• Gunakan Cascade Secara Efektif: Manfaatkan cascade CSS untuk mengelola animasi. Definisikan properti animasi umum dalam kelas dasar dan kemudian timpa properti spesifik untuk status transisi tampilan yang berbeda.

Teknik dan Pertimbangan Tingkat Lanjut

Penugasan Kelas Dinamis

Meskipun contoh di atas menggunakan gaya inline untuk view-transition-name dan view-transition-class, dalam aplikasi dunia nyata, Anda kemungkinan besar ingin mengelolanya secara dinamis menggunakan JavaScript. Ini memungkinkan Anda menerapkan kelas yang berbeda berdasarkan perubahan status spesifik atau interaksi pengguna.

Contoh:

function updateContent(newContent, transitionType) {
  document.startViewTransition(() => {
    const mainElement = document.querySelector('main');
    mainElement.innerHTML = newContent;

    // Hapus semua kelas transisi yang ada
    mainElement.classList.remove('slide-in', 'fade-in');

    // Tambahkan kelas transisi yang sesuai
    if (transitionType === 'slide') {
      mainElement.classList.add('slide-in');
    } else if (transitionType === 'fade') {
      mainElement.classList.add('fade-in');
    }
  });
}

Contoh ini menunjukkan cara menambahkan kelas CSS secara dinamis untuk mengontrol animasi berdasarkan tipe transisi yang diinginkan.

Bekerja dengan Komponen Kompleks

Ketika berhadapan dengan komponen yang kompleks, Anda mungkin perlu menetapkan beberapa nilai view-transition-name dan view-transition-class ke elemen yang berbeda di dalam komponen. Ini memungkinkan Anda membuat transisi yang lebih terperinci dan terkontrol.

Contoh:

<div style="view-transition-name: component;">
  <h2 style="view-transition-name: component-title; view-transition-class: title-transition;">Component Title</h2>
  <p style="view-transition-name: component-content; view-transition-class: content-transition;">Component Content</p>
</div>

Dalam contoh ini, komponen itu sendiri memiliki view-transition-name, begitu juga elemen judul dan konten. Ini memungkinkan Anda menganimasikan seluruh komponen sebagai satu unit, sambil juga menerapkan animasi spesifik pada judul dan konten secara individual.

Menangani Operasi Asinkron

Jika pembaruan status Anda melibatkan operasi asinkron (misalnya, mengambil data dari API), Anda perlu memastikan bahwa callback document.startViewTransition() dieksekusi *setelah* operasi asinkron selesai. Ini dapat dicapai menggunakan promise atau async/await.

Contoh:

asyn